<template>
  <div class="answers_object">
    <template v-if="answersData.data && answersData.data.length>0">
      <p class="foot_answer_title">您的足迹：</p>
      <ul class="bubble_list" :id="answersData.talkSessionId">
        <li v-for="(footPrint, title, index) in handleFootPrint(answersData.data)" :key="index">
          <h3 class="bubble_title foot_title">{{ title }}</h3>
          <ul class="foot_item">
            <li v-for="(item, footIndex) in footPrint" :key="footIndex">
              &lt;{{ handleFootHtml(item.level1Title) }}&gt;{{ handleFootHtml(item.queryText) }} ({{ handleFootHtml(item.visitType)}}, {{handleFootHtml(item.category) }})
            </li>
          </ul>
        </li>
      </ul>
      <div class="foot_print_bottom">
        <van-button @click="moreFootPrint(answersData.talkSessionId)" class="more_foot_button" :loading="footPrintLoading" text="更多足迹"></van-button>
      </div>
    </template>
    <template v-else>
      <p>暂无足迹数据</p>
    </template>
  </div>
</template>

<script>
import API from '@/api/api-chat-list.js'
import getTime from '@/utils/getTime.js'
export default {
  name: 'AnswersFootPrint',
  props: ['answersData'],
  data(){
    return {
      footPrintLoading: false, // 我的足迹loading
    }
  },
  methods: {
    // 足迹展示处理
    handleFootHtml(data) {
      if (data?.length > 10) {
        return data.substr(0, 8) + "...";
      }
      return data;
    },
    // 我的足迹数据处理
    handleFootPrint(data) {
      let categoryFoot = {};
      data && data.forEach(foot => {
        categoryFoot[foot.time] = categoryFoot[foot.time] || [];
        categoryFoot[foot.time].push(foot);
      });
      return categoryFoot;
    },
    // 更多足迹
    async moreFootPrint(talkSessionId) {
      // loading
      this.footPrintLoading = true;
      // 获取当前足迹最后的时间
      let footPrintHtml = document.getElementById(talkSessionId);
      let footPrintTime = footPrintHtml.getAttribute("footPrint-time");
      // 获取足迹
      const footPrintData = await API.getFootPrint({time: footPrintTime});
      const data = footPrintData.data;
      if (data?.length < 1) {
        this.$toast.fail("没有更多足迹啦");
        this.footPrintLoading = false;
        return;
      }
      // 将已经存储的足迹数据 和 点击更多足迹获取的最新数据 进行展开
      let answersData = [...this.answersData.data,...data];
      // 将新的数据重新存储到仓库中
      this.$store.commit('modifyAnswersFootPrintData',{talkSessionId,answersData})
      this.$nextTick(() => {
        // 替换足迹最晚时间
        let dom = document.getElementById(talkSessionId);
        dom.setAttribute("footPrint-time", getTime(data[data.length - 1].createTime));
      })
      // 关闭loading
      this.footPrintLoading = false;
    }
  }
}
</script>